<template>
  <el-menu-item index="7" @click="isShow = !isShow"> 路况信息</el-menu-item>
  <div class="traffic-information-container" v-show="isShow">
    <!-- header -->
    <div class="traffic-information-header">
      <h2>路况信息</h2>
      <img
        class="close"
        src="@/images/close.png"
        alt=""
        @click="isShow = false"
      />
    </div>
    <!-- body -->
    <div class="traffic-information-body">
      <!--btn-->
      <div class="traffic-information-body-btn">
        <input
          type="text"
          placeholder="请输入关键词"
          v-model.trim="searchKey"
          @input="handleInput(searchKey)"
          @keydown.enter="handleInput(searchKey)"
        />
        <div class="icon-container">
          <i
            class="iconfont icon-zhongzhi"
            @click="handleInput((searchKey = ''))"
          ></i>
        </div>
        <div class="icon-container">
          <i class="iconfont icon-biaogedaochu" @click="handleExport"></i>
        </div>
      </div>
      <!-- table -->
      <div class="traffic-information-table">
        <table class="table">
          <thead>
            <tr>
              <th>用户名</th>
              <th>事件类型</th>
              <th>事件地址</th>
              <th>附近建筑</th>
              <th>发生时间</th>
              <th>事件描述</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr v-for="(item, index) in reportList" :key="item.username">
              <td>{{ item.username }}</td>
              <td>{{ item.eventType }}</td>
              <td>{{ item.eventAddress }}</td>
              <td>{{ item.buildingSign }}</td>
              <td>{{ item.dateTime }}</td>
              <td>{{ item.eventDescription }}</td>
              <td v-if="item.status == '待审核'">
                <button class="pass" @click="pass(item)">通过</button>
                <button
                  class="overlook"
                  @click="trafficReports.splice(index, 1)"
                >
                  忽略
                </button>
              </td>
              <td v-if="item.status == '已审核'">
                <span>已审核</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as XLSX from "xlsx";
import axios from "axios";
import { ref, getCurrentInstance, onMounted } from "vue";
import { useTrafficStore } from "@/stores/traffic";
import { storeToRefs } from "pinia";
import { setMarkerStyle } from "@/api/ol-api/index.js";
const { trafficReports } = storeToRefs(useTrafficStore());
const { proxy } = getCurrentInstance();
const isShow = ref(false);//控制弹出层显示
/* 搜索列表 */
const searchKey = ref("");
const reportList = ref([]);
reportList.value = trafficReports.value;
const handleInput = (searchKey) => {
  if (searchKey !== "") {
    reportList.value = trafficReports.value.filter((item) => {
      return (
        item.username.includes(searchKey) ||
        item.eventAddress.includes(searchKey) ||
        item.eventType.includes(searchKey) ||
        item.buildingSign.includes(searchKey) ||
        item.eventDescription.includes(searchKey)
      );
    });
    if (reportList.value.length === 0) {
      reportList.value = null;
    }
  } else {
    reportList.value = trafficReports.value;
  }
};
/* 导出excel表 */
const handleExport = () => {
  //表格的引用 文件标题 导出的文件名
  const table = document.querySelector(".table");
  // 将表格转成工作表
  const ws = XLSX.utils.table_to_sheet(table);
  // 创建一个新的工作簿
  const wb = XLSX.utils.book_new();
  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, "路况信息");
  // 导出为 Excel 文件
  XLSX.writeFile(wb, "路况信息表.xlsx");
};
/* 审核通过 */
const pass = async (item) => {
  item.status = "已审核";
  console.log(item.eventAddress); //根据地址逆地理编码获取位置信息
  const res = await axios.get(
    `https://restapi.amap.com/v3/place/text?keywords=${item.eventAddress}&city=wuhan&offset=1&page=1&key=a02a9d5f385d4d247bbccc1162cfb3a9&extensions=all`
  );
  //`https://restapi.amap.com/v3/place/text?keywords=${item.eventAddress}&city=wuhan&offset=1&page=1&key=a02a9d5f385d4d247bbccc1162cfb3a9&extensions=all`
  console.log(res.data.pois[0].location); //获取位置信息
  /* 设置高亮图层 */
  const new_layer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [],
    }),
  });
  const map = proxy.$map;
  map.addLayer(new_layer);
  console.log(map.getLayers());
  // 创建要素
  const feature = new ol.Feature({
    geometry: new ol.geom.Point(
      res.data.pois[0].location.split(",").map((item) => Number(item))
    ),
    eventType: item.eventType,
    eventTime: item.dateTime,
    eventAddress: item.eventAddress,
    username: item.username,
  });
  feature.setStyle(setMarkerStyle("/src/images/location.png"));
  //添加到图层
  new_layer.getSource().addFeature(feature);
  //在添加事件组件中，点击要素弹出事件添加信息框，自动填写相关信息，点击确定后，修改样式信息，并添加点要素到地图上，并将信息添加到数据库中
};
</script>

<style scoped>
/* container */
.traffic-information-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  height: 320px;
  width: 900px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
/* header */
.traffic-information-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.traffic-information-header img {
  width: 12px;
  height: 12px;
  margin-right: 20px;
  cursor: pointer;
}
.traffic-information-header h2 {
  padding: 10px;
  color: gray;
}
/* body */
.traffic-information-body {
  width: 95%;
  margin: 0 auto;
}

.traffic-information-body-btn {
  display: flex;
  justify-content: right;
  align-items: center;
  margin: 10px 0;
}
.traffic-information-body-btn input {
  width: 250px;
  height: 25px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  outline: none;
}
.traffic-information-body-btn div {
  height: 25px;
  width: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  cursor: pointer;
}
.traffic-information-body-btn div:hover {
  background-color: rgba(210, 232, 241, 0.3);
}

.icon-container i {
  color: black; /* 默认颜色 */
  transition: color 0.1; /* 添加平滑过渡效果 */
}
.traffic-information-body-btn div:hover.icon-container i {
  color: rgba(64, 158, 255, 0.5); /* 鼠标悬停时的颜色 */
  z-index: 100;
}
.traffic-information-body-btn input:focus {
  border-color: #409eff; /* 聚焦时的边框颜色 */
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5); /* 聚焦时的阴影效果 */
}
/* table */
.traffic-information-table table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid #ccc;
}
.traffic-information-table th {
  text-align: center;
  padding: 5px 10px;
  border: 1px solid #ccc;
}
.traffic-information-table td {
  text-align: center;
  border: 1px solid #ccc;
  padding: 5px;
}
.traffic-information-table tbody {
  font-size: 13px;
}
.traffic-information-table tbody button {
  padding: 2px 10px;
  color: white;
  border-radius: 2px;
  border: none;
  cursor: pointer;
}
.traffic-information-table tbody .pass {
  background-color: #509928;
  margin-right: 10px;
}
.traffic-information-table tbody .overlook {
  background-color: #d69745;
}
</style>
